Angular Conditional Rendering
Conditional rendering state-அடிப்படையில் template-ன் பகுதிகளை காட்டுகிறது அல்லது மறைக்கிறது.
Conditional Rendering Essentials
- Conditional logic-க்கு @if / @else if / @else பயன்படுத்தவும்.
- பல view-களில் ஒன்றை தேர்ந்தெடுக்க @switch பயன்படுத்தவும்.
- Signals: Conditions-ஐ signals-லிருந்து drive செய்யவும் மற்றும் அவற்றை templates-ல் sig() மூலம் read செய்யவும்.
- Hide vs remove: @if DOM-இலிருந்து remove செய்கிறது; destroy செய்யாமல் மறைக்க [hidden] அல்லது CSS பயன்படுத்தவும்.
- Legacy: *ngIf மற்றும் [ngSwitch] ஆதரிக்கப்படுகின்றன ஆனால் இங்கு காட்டப்படவில்லை.
Conditional Rendering Syntax
@if (condition) { <p>Shown</p> } @else { <p>Hidden</p> }
@switch (value) {
@case ('x') { <p>X</p> }
@default { <p>Other</p> }
}
<div [hidden]="!isVisible">Hidden but in DOM</div>Note
Control Flow for @if/@switch/@for, Templates for markup/interpolation, Events for handling input, and Lists for rendering collections ஆகியவற்றை காணவும்.
Basic Conditional Rendering
@if / @else மூலம் content render செய்யவும்.
Booleans-ஐ signals-லிருந்து drive செய்யவும்; template expressions-ஐ simple-காக வைக்கவும்.
Basic Conditional Example
@if (show()) { <p>Now you see me!</p> } @else { <p>Now I'm hidden.</p> }Example
Conditional Rendering Example
import { bootstrapApplication } from '@angular/platform-browser';
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
template: `
<h3>Conditional Rendering</h3>
<button (click)="show.set(!show())">Toggle</button>
@if (show()) { <p>Now you see me!</p> } @else { <p>Now I'm hidden.</p> }
`
})
export class App {
show = signal(true);
}
bootstrapApplication(App);Example Explained
- @if (show()): show signal-ஐ read செய்கிறது; true ஆக இருக்கும் போது first block-ஐ render செய்கிறது, இல்லையெனில் @else block.
- Toggle: Button show.set(!show()) call செய்கிறது signal value flip செய்ய.
- Signals in templates: Signals-ஐ அவற்றை call செய்வதன் மூலம் read செய்யவும் (e.g., show()).
Notes
- Keep expressions light: Templates-ல் methods call செய்வதை தவிர்க்கவும்; handlers/services-ல் signals update செய்யவும்.
- Legacy: *ngIf with then/else ஆதரிக்கப்படுகிறது.
- Be explicit: Complex truthy/falsy checks-க்கு பதிலாக clear conditions பயன்படுத்தவும் (e.g., isVisible).
@switch
ஒரு single value-ல் switch செய்து matching case-ஐ render செய்யவும்.
Unexpected values-க்கு எப்போதும் explicit default வழங்கவும் @default உடன்.
@switch Example Syntax
@switch (status) {
@case ('loading') { <p>Loading...</p> }
@case ('success') { <p>Success!</p> }
@case ('error') { <p style="color:crimson">Error!</p> }
@default { <p>Unknown status</p> }
}Example
@switch Example
import { bootstrapApplication } from '@angular/platform-browser';
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
template: `
<h3>Conditional Rendering with @switch</h3>
<label>
Status:
<select (change)="status.set($any($event.target).value)">
<option value="loading">loading</option>
<option value="success">success</option>
<option value="error">error</option>
</select>
</label>
@switch (status()) {
@case ('loading') { <p>Loading...</p> }
@case ('success') { <p>Success!</p> }
@case ('error') { <p style="color:crimson">Error!</p> }
@default { <p>Unknown status</p> }
}
`
})
export class App {
status = signal<'loading' | 'success' | 'error' | string>('loading');
}
bootstrapApplication(App);Example Explained
- @switch (status()): தற்போதைய status signal value-அடிப்படையில் render செய்ய ஒரு case-ஐ தேர்ந்தெடுக்கிறது.
- @case / @default: Matching @case-ஐ render செய்கிறது; எந்த case-உம் match செய்யாத போது @default-க்கு fallback செய்கிறது.
- Change handler: Select status.set($any($event.target).value) மூலம் status-ஐ set செய்கிறது.
Notes
- Default matters: Unexpected values-க்கு எப்போதும் @default case வழங்கவும்.
- Stable values: Predictable matching-க்கு objects-க்கு பதிலாக simple primitives-ல் switch செய்யவும் (e.g., strings).
Multi-state with @if
Readable multi-state flows-க்கு @if / @else if / @else பயன்படுத்தவும்.
Component-லிருந்து state transitions-ஐ drive செய்யவும் (e.g., timers, flags) signals மூலம்.
Multi-state @if Syntax
@if (!loading() && !error()) {
<p>Content loaded successfully.</p>
} @else if (loading()) {
<p>Loading...</p>
} @else {
<p style="color:crimson">Something went wrong.</p>
}Example
Multi-state Example
import { bootstrapApplication } from '@angular/platform-browser';
import { Component, signal } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
styles: [`
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
`],
template: `
<h3>Multi-state with @if</h3>
<div class="toolbar">
<button (click)="startLoading()">Start Loading</button>
<button (click)="showError()">Set Error</button>
<button (click)="reset()">Reset</button>
<span style="margin-left:8px;color:#666">loading={{ loading() }} error={{ error() }}</span>
</div>
@if (!loading() && !error()) {
<p>Content loaded successfully.</p>
} @else if (loading()) {
<p>Loading...</p>
} @else {
<p style="color:crimson">Something went wrong.</p>
}
`
})
export class App {
loading = signal(false);
error = signal(false);
private _timer: any;
startLoading() {
this.loading.set(true);
this.error.set(false);
clearTimeout(this._timer);
this._timer = setTimeout(() => {
this.loading.set(false);
}, 800);
}
showError() {
this.error.set(true);
this.loading.set(false);
}
reset() {
this.loading.set(false);
this.error.set(false);
}
}
bootstrapApplication(App);Example Explained
- Multi-branch @if: loading() மற்றும் error() signals-அடிப்படையில் success, loading, அல்லது error sections-ஐ render செய்கிறது.
- startLoading(): Loading-ஐ true-க்கு set செய்கிறது, error-ஐ clear செய்கிறது, பின்னர் 800ms க்கு பிறகு loading-ஐ off செய்கிறது (async work simulate செய்கிறது).
- showError() / reset(): showError() error-ஐ set செய்து loading-ஐ clear செய்கிறது; reset() இரண்டையும் clear செய்கிறது.
Notes
- Readable flows: Multi-state UIs-க்கு @else if chains-ஐ விரும்பவும்; blocks dynamically reference செய்ய தேவைப்படும் போது மட்டுமே named templates பயன்படுத்தவும்.
- Avoid flicker: Component-லிருந்து state-ஐ drive செய்யவும்; transitions-ல் UI flicker prevent செய்ய timers மற்றும் async work clear செய்யவும்.